<template>
	<div ref="dragWrapper" class="org-tree-drag-wrapper" @mousedown="mousedownView" @contextmenu="handleDocumentContextmenu">
		<div class="org-tree-wrapper" :style="orgTreeStyle">
			<v-org-tree v-if="data" :data="data" :node-render="nodeRender" :expand-all="true" @on-node-click="handleNodeClick" collapsable></v-org-tree>
		</div>
	</div>
</template>

<script>
import { on, off } from '@/libs/tools';
const menuList = [
	{
		key: 'edit',
		label: '编辑部门'
	},
	{
		key: 'detail',
		label: '查看部门'
	},
	{
		key: 'new',
		label: '新增子部门'
	},
	{
		key: 'delete',
		label: '删除部门'
	}
];
export default {
	name: 'OrgView',
	props: {
		zoomHandled: {
			type: Number,
			default: 1
		},
		data: Object
	},
	data() {
		return {
			currentContextMenuId: '',
			orgTreeOffsetLeft: 0,
			orgTreeOffsetTop: 0,
			initPageX: 0,
			initPageY: 0,
			oldMarginLeft: 0,
			oldMarginTop: 0,
			canMove: false
		};
	},
	computed: {
		orgTreeStyle() {
			return {
				transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${this.zoomHandled})`,
				marginLeft: `${this.orgTreeOffsetLeft}px`,
				marginTop: `${this.orgTreeOffsetTop}px`
			};
		}
	},
	methods: {
		handleNodeClick(e, data, expand) {
			expand();
		},
		closeMenu() {
			this.currentContextMenuId = '';
		},
		getBgColor(data) {
			return this.currentContextMenuId === data.id ? (data.isRoot ? '#0d7fe8' : '#5d6c7b') : '';
		},
		nodeRender(h, data) {
			return (
				<div
					class={['custom-org-node', data.children && data.children.length ? 'has-children-label' : '']}
					on-mousedown={event => event.stopPropagation()}
					on-contextmenu={this.contextmenu.bind(this, data)}
				>
					{data.label}
					<dropdown
						trigger="custom"
						class="context-menu"
						visible={this.currentContextMenuId === data.id}
						nativeOn-click={this.handleDropdownClick}
						on-on-click={this.handleContextMenuClick.bind(this, data)}
						style={{
							transform: `scale(${1 / this.zoomHandled}, ${1 / this.zoomHandled})`
						}}
						v-click-outside={this.closeMenu}
					>
						<dropdown-menu slot="list">
							{menuList.map(item => {
								return <dropdown-item name={item.key}>{item.label}</dropdown-item>;
							})}
						</dropdown-menu>
					</dropdown>
				</div>
			);
		},
		contextmenu(data, $event) {
			let event = $event || window.event;
			event.preventDefault ? event.preventDefault() : (event.returnValue = false);
			this.currentContextMenuId = data.id;
		},
		setDepartmentData(data) {
			data.isRoot = true;
			this.departmentData = data;
		},
		mousedownView(event) {
			this.canMove = true;
			this.initPageX = event.pageX;
			this.initPageY = event.pageY;
			this.oldMarginLeft = this.orgTreeOffsetLeft;
			this.oldMarginTop = this.orgTreeOffsetTop;
			on(document, 'mousemove', this.mousemoveView);
			on(document, 'mouseup', this.mouseupView);
		},
		mousemoveView(event) {
			if (!this.canMove) return;
			const { pageX, pageY } = event;
			this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
			this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
		},
		mouseupView() {
			this.canMove = false;
			off(document, 'mousemove', this.mousemoveView);
			off(document, 'mouseup', this.mouseupView);
		},
		handleDropdownClick(event) {
			event.stopPropagation();
		},
		handleDocumentContextmenu() {
			this.canMove = false;
		},
		handleContextMenuClick(data, key) {
			this.$emit('on-menu-click', { data, key });
		}
	},
	mounted() {
		on(document, 'contextmenu', this.handleDocumentContextmenu);
	},
	beforeDestroy() {
		off(document, 'contextmenu', this.handleDocumentContextmenu);
	}
};
</script>

<style></style>
